import { ArrowLeftOutlined } from '@ant-design/icons';
import ProCard from '@ant-design/pro-card';
import { ProCardProps } from '@ant-design/pro-card';
import React from 'react';
import { Link } from 'react-router-dom';
import Title from './Title';

type PageProps = ProCardProps & {
  title: string | React.ReactNode;
  children: React.ReactNode;
};

function Page({ title, children, ...rest }: PageProps) {
  return (
    <ProCard
      title={
        title ? (
          <Title>
            <Link to={'/home'}>
              <ArrowLeftOutlined />
            </Link>
            <span style={{ marginLeft: 8 }}>{title}</span>
          </Title>
        ) : null
      }
      direction="column"
      headerBordered
      size="small"
      className="page"
      bodyStyle={{ overflow: 'auto' }}
      {...rest}
    >
      {children}
    </ProCard>
  );
}

export default Page;
